<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03 属性绑定和事件绑定</title>
  </head>
  <body>
    <div id="app">
      <h2>1.绑定属性 v-bind:title="msg" 可以简写成 :title="msg"</h2>
      <p v-bind:title="msg">广播体操</p>
      <p :title="msg">广播体操</p>
      <img :src="url" alt="" />
      <a :href="link" target="_blank">百度</a>

      <h2>2.事件绑定 v-on:click="表达式或函数" 可以简写 @click=""</h2>
      <p v-on:click="chang(2)">点击加菜</p>
      <p @click="chang">点击加菜</p>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      //设置挂载点
      el: "#app",

      //数据
      data: {
        msg: "你笑起来真好看",
        url:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601275428142&di=3a22298e8ea565ee45414650fe4f9f8b&imgtype=0&src=http%3A%2F%2Fp1.ssl.cdn.btime.com%2Ft015c6f323673d98636.jpg%3Fsize%3D640x562",
        link: "https://www.baidu.com/",
      },

      //方法
      methods: {
        chang(num) {
          alert("酸菜鱼" + num);
        },
      },
    });
  </script>
</html>
